<template>
	<view>
		<uni-nav-bar backgroundColor="transparent" :statusBar="true" :border="false" :fixed="true" left-icon="back"
			@clickLeft="$tab.back()" title="打赏列表" color="#FFF">
		</uni-nav-bar>

		<view class="navTop">

		</view>

		<view class="px-20">
			<u-tabs :list="tabsList" @click="tabClick" keyName="label" :scrollable="false" lineColor="#000"
				:activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"></u-tabs>
			<u-line color="#EAEAEA"></u-line>
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="" v-for="(item,index) in list" :key="item.id">
					<view class="py-32 ">
						<view class="flex align-center justify-between">
							<view class="">
								<view class="text-32 font-700">
									{{item.createUserTemp.nickName}}
								</view>
								<view class="text-gray mt-20">
									{{item.createUserTemp.phonenumber}}
								</view>
								<view class="mt-12 text-28">
									{{item.createTime}}
								</view>
							</view>
							<view class="flex flex-col justify-between align-center">
								<view class="text-28" :style="{
									color:stateFun(item.verifyState,2)
								}">
									{{stateFun(item.verifyState,1)}}
								</view>
								<view class="fontW-bold fontS-48 mt-24">
									{{item.amount}}
								</view>
							</view>
						</view>
						
						<view class="text-28 mt-16 flex align-center" style="color: #F41111;" v-if="item.verifyState == 0" @click="getDetail(item.id)">
							查看详情
							<image src="http://img.kxjb1319.com/reward/icon_chakanxiangqign@2x.png" style="width: 32rpx;height: 32rpx;margin-left: 12rpx;" mode=""></image>
						</view>
					</view>

					
					<u-line color="#EAEAEA"></u-line>
				</view>
			</s-pull-scroll>
		</view>
		
		
		<u-popup :show="isShop" bgColor="transparent" mode="center" @close="isShop = false;">
			<view class="rewardPopup" v-if="rewardDetail">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/img_lingqudashang@2x.png" class="rewardTop" mode=""></image>
				<image src="http://img.kxjb1319.com/reward/icon_quxiao@2x.png" class="cancel" @click="isShop = false;" mode=""></image>
				<view class="rewardContent flex flex-col align-center">
					<view class="mb-32 pt-24">
						<view class="title text-28 text-gray" style="width: 100%;">
							用户昵称
						</view>
						
						<input type="text" class="rewardInput mt-16"  :value="rewardDetail.createUserTemp.nickName" disabled>
					</view>
					<view class="mb-32">
						<view class="title text-28 text-gray" style="width: 100%;">
							账户信息
						</view>
						
						<input type="text" class="rewardInput mt-16"  :value="rewardDetail.createUserTemp.phonenumber" disabled>
					</view>
					<view class="mb-32">
						<view class="title text-28 text-gray" style="width: 100%;">
							支付金额
						</view>
						
						<input type="text" class="rewardInput mt-16"  :value="rewardDetail.amount" disabled>
					</view>
					<view class="mb-32">
						<view class="title text-28 text-gray" style="width: 100%;">
							提交时间
						</view>
						
						<input type="text" class="rewardInput mt-16"  :value="rewardDetail.createTime" disabled>
					</view>
					
					
					<view class="mt-32 text-28 text-center flex align-center ">
						<view class="reject" @click="rewardConfirm(2)">
							驳回请求
						</view>
						<view class="rewardConfirm text-FFF ml-20" @click="rewardConfirm(1)">
							审核通过
						</view>
					</view>
					
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tabsList: [{
						value: "",
						label: "全部"
					},
					{
						value: 0,
						label: "审核中"
					},
					{
						value: 1,
						label: "已通过"
					},
					{
						value: 2,
						label: "已驳回"
					},
				],
				current: '',
				
				
				isShop: false,
				rewardDetail:null
				
			}
		},
		onLoad() {
			this.refresh();
		},
		methods: {
			async rewardConfirm(state){
				this.isShop = false
				this.$modal.confirm(`确认${state == 1 ? '审核通过' : '驳回请求'}吗?`).then(async con=>{
					if(con){
						const res = await this.$Api.store.verifyReward({
							id:this.rewardDetail.id,
							verifyState:state
						})
						this.$modal.msg('操作成功!')
						this.refresh();
					}
				})
			},
			async getDetail(id){
				const res = await this.$Api.store.getRewardInfoById(id)
				console.log(res,'id')
				this.rewardDetail = res.data
				this.isShop = true
			},
			stateFun(state,type){
				let value;
				if(type == 1){
					this.tabsList.forEach(item=>{
						if(item.value == state){
							value = item.label
							
						}
					})
				}else{
					value = state == 0 ? '#6CAF2A' : state == 1 ? '#FF611B' : '#BCBCBC'
				}
				return value
			},
			tabClick(e) {
				this.current = e.value
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					this.$Api.store.rewardBusinessList({
						pageSize: 10,
						pageNum: pullScroll.page,
						verifyState: this.current
					}).then(res => {
						if (pullScroll.page == 1) {
							this.list = [];
						}
						res.rows = res.rows || []
						this.list = [...this.list, ...res.rows]
						if (res.total == 0) {
							pullScroll.empty();
						}

						if (this.list.length >= res.total) {
							pullScroll.finish();
						} else {
							pullScroll.success();
						}
					})
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	.navTop {
		height: 176rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/common/dashang-nav.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}
	
	.rewardPopup{
		width: 600rpx;
		position: relative;
		height: 1118rpx;
		.rewardTop{
			width: 600rpx;
			height: 222rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}
		.cancel{
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 16rpx;
			top: 16rpx;
			z-index: 2;
		}
		.rewardContent{
			width: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			top: calc(222rpx - 96rpx);
			padding: 96rpx 0  32rpx 0;
			border-radius: 0 0 24rpx 24rpx;
			
			.reject{
				width: 248rpx;
				height: 80rpx;
				background: #F1F1F1;
				opacity: 1;
				border-radius: 370rpx 370rpx 370rpx 370rpx;
				line-height: 80rpx;
			}
		
			.rewardInput{
				width: 520rpx;
				height: 96rpx;
				background: #EDF9DA;
				border-radius: 12rpx;
				padding: 0 24rpx;
			}
			.rewardConfirm{
				width: 248rpx;
				height: 80rpx;
				background: linear-gradient(180deg, #FFB23A 0%, #FF5617 100%);
				border-radius: 370rpx 370rpx 370rpx 370rpx;
				line-height: 80rpx;
			}
		}
	}
</style>